<template>
	<view class="home-content">
		<u-navbar v-if="navBarShowTag">
			<div class="home-content__tabs-box-top">
				<view class="one-nav" v-for="(item,index) in tabList" :key="index"
					:class="currentSwiperIndex === index ? 'nav-actived' : '' " @tap="swiperChange(index)">
					{{item.label}}
				</view>
			</div>
		</u-navbar>

		<div class="home-content__header">
			<span class="home-content__header--text">今日新闻</span>
		</div>
		<!-- Tab 选项卡 -->
		<view class="home-content__tabs-box">
			<view class="one-nav" v-for="(item,index) in tabList" :key="index"
				:class="currentSwiperIndex === index ? 'nav-actived' : '' " @tap="swiperChange(index)">{{item.label}}
			</view>
		</view>
		<!-- 新闻列表 -->
		<div class="home-content__list-box">
			<swiper class="swiper-box" :style=" 'height:'+ swiperSliderHeight " :current="currentSwiperIndex"
				@animationfinish="swiperSlider">
				<!-- 头条列表实现 -->
				<swiper-item class="swiper-item sns-news" v-for="(item1,index) in tabList" :key="index">
					<view class="swiper-item__content" v-for="(item, index2) in item1.data" :key="index2"
						@click="goNewInfo(item)">
						<div class="swiper-item__content__title">
							{{item.title}}
						</div>
						<div v-if="item.thumbnail_pic_s && item.thumbnail_pic_s02 && item.thumbnail_pic_s03"
							class="swiper-item__content__newimg">
							<image class="pic" mode="aspectFill" :src="item.thumbnail_pic_s" />
							<image class="pic" mode="aspectFill" :src="item.thumbnail_pic_s02" />
							<image class="pic" mode="aspectFill" :src="item.thumbnail_pic_s03" />
						</div>
						<div v-else-if="item.thumbnail_pic_s && item.thumbnail_pic_s02 && !item.thumbnail_pic_s03"
							class="swiper-item__content__newimg swiper-item__content--two">
							<image class="pic" mode="aspectFill" :src="item.thumbnail_pic_s" />
							<image class="pic" mode="aspectFill" :src="item.thumbnail_pic_s02" />
							<image style="opacity: 0;" class="pic" mode="aspectFill" src="/static/index.png" />
						</div>
						<div v-else-if="item.thumbnail_pic_s && !item.thumbnail_pic_s02 && !item.thumbnail_pic_s03"
							class="swiper-item__content__newimg swiper-item__content--one">
							<image class="pic" mode="aspectFill" :src="item.thumbnail_pic_s" />
							<image style="opacity: 0;" class="pic" mode="aspectFill" src="/static/index.png" />
							<image style="opacity: 0;" class="pic" mode="aspectFill" src="/static/index.png" />
						</div>

						<div class="swiper-item__content__time">
							{{item.date}}
						</div>
					</view>
				</swiper-item>
			</swiper>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabList: [{
						label: '头条',
						value: '',
						data: [{
							"uniquekey": "db61b977d9fabd0429c6d0c671aeb30e",
							"title": "“新时代女性的自我关爱”主题沙龙暨双山街道福泰社区妇儿活动家园启动仪式举行",
							"date": "2021-03-08 13:47:00",
							"category": "头条",
							"author_name": "鲁网",
							"url": "https://mini.eastday.com/mobile/210308134708834241845.html",
							"thumbnail_pic_s": "https://dfzximg02.dftoutiao.com/news/20210308/20210308134708_d0216565f1d6fe1abdfa03efb4f3e23c_0_mwpm_03201609.png",
							"thumbnail_pic_s02": "https://dfzximg02.dftoutiao.com/news/20210308/20210308134708_d0216565f1d6fe1abdfa03efb4f3e23c_1_mwpm_03201609.png",
							"thumbnail_pic_s03": "https://dfzximg02.dftoutiao.com/news/20210308/20210308134708_d0216565f1d6fe1abdfa03efb4f3e23c_2_mwpm_03201609.png",
							"is_content": "1"
						}]
					},
					{
						label: '国内',
						value: 'guonei',
						data: []
					},
					{
						label: '国际',
						value: 'guoji',
						data: []
					},
					{
						label: '娱乐',
						value: 'yule',
						data: []
					},
					{
						label: '体育',
						value: 'tiyu',
						data: []
					},
					{
						label: '军事',
						value: 'junshi',
						data: []
					}
				],
				newsList: [],
				navBarShowTag: false,
				// 当前 推荐 资讯 滑动位置
				currentSwiperIndex: 0,
				// 滑动页面轮播器的高度
				swiperSliderHeight: '500px',
				swiperSliderNewsHeight: 0,
				// 记录滚动所在的位置
				oldFeedsScrollTop: 0,
				oldNewsScrollTop: 0
			}
		},
		onLoad() {
			this.getNewList()
		},
		methods: {
			// 跳转详情
			goNewInfo(info) {
				// console.log('跳转详情', info)
				uni.navigateTo({
					url: '/pages/info/info?uniquekey=' + info.uniquekey
				});
			},
			async getNewList(type = '') {
				let newList = await this.$u.api.getNewList({
					type: type,
					page: '',
					page_size: '',
					is_filter: ''
				})
				const {
					result
				} = newList;
				this.newsList = result.data
				switch (type) {
					case 'guonei':
						this.tabList[1].data = result.data
						break;
					case 'guoji':
						this.tabList[2].data = result.data
						break;
					case 'yule':
						this.tabList[3].data = result.data
						break;
					case 'tiyu':
						this.tabList[4].data = result.data
						break;
					case 'junshi':
						this.tabList[5].data = result.data
						break;
					default:
						this.tabList[0].data = result.data
				}

				this.swiperSliderNewsHeight = this.newsList.length * 95 + 100 + 'px'
				this.swiperSliderHeight = this.swiperSliderNewsHeight
				console.log('获取新闻列表数据' + type, this.newsList)
			},
			onPageScroll(event) {
				// console.log('页面滚动', event.scrollTop)
				if (this.currentSwiperIndex === 0) {
					this.oldFeedsScrollTop = event.scrollTop
				} else {
					this.oldNewsScrollTop = event.scrollTop
				}
				if (event.scrollTop > 105) {
					this.navBarShowTag = true
				} else {
					this.navBarShowTag = false
				}
			},
			getType(index) {
				var type = ''
				switch (index) {
					case 1:
						type = 'guonei'
						break;
					case 2:
						type = 'guoji'
						break;
					case 3:
						type = 'yule'
						break;
					case 4:
						type = 'tiyu'
						break;
					case 5:
						type = 'junshi'
						break;
				}
				return type
			},
			// 点击按钮实现切换效果
			swiperChange(index) {
				var type = this.getType(index)
				if (this.tabList[index].data.length === 0) {
					this.getNewList(type)
				}
				if (index === 0) {
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldFeedsScrollTop, //滚动到目标位置
					})
				} else {
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldNewsScrollTop, //滚动到目标位置
					})
				}
				this.currentSwiperIndex = index
			},
			// 页面滑动左右分页的时候实现的效果
			swiperSlider(event) {
				if (event.detail.current === 0) {
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldFeedsScrollTop, //滚动到目标位置
					})
				} else {
					uni.pageScrollTo({
						duration: 0, //过渡时间必须为0，uniapp bug，否则运行到手机会报错
						scrollTop: this.oldNewsScrollTop, //滚动到目标位置
					})
				}
				this.currentSwiperIndex = event.detail.current
			},
		}
	}
</script>

<style lang="scss">
	.home-content {
		height: 100vh;

		// 推荐、咨询 按钮样式
		&__tabs-box-top {
			display: flex;

			.one-nav {
				height: 100%;
				padding: 5px 5px;
				box-sizing: border-box;
				font-size: 12px;
				width: 30px;
			}

			.nav-actived {
				color: #2378E4;
				font-size: 14px;
			}
		}

		&__header {
			height: 80px;
			background-color: #F4501C;
			color: white;
			position: relative;

			&--text {
				position: absolute;
				font-size: 16px;
				left: 10px;
				bottom: 10px;
			}
		}

		&__tabs-box {
			display: flex;
			width: 100%;
			height: 25px;

			.one-nav {
				height: 100%;
				padding: 5px 10px;
				box-sizing: border-box;
			}

			.nav-actived {
				color: #F4501C;
				background-color: #DDFFBB;
			}
		}

		&--top {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
		}

		&__list-box {
			padding: 10px;
			background-color: #F2F2F2;

			.swiper-item {
				&__content {
					border-bottom: 1px solid #DDDDDD;
					padding-bottom: 10px;

					&__title {
						font-size: 14px;
						margin: 10px 0;
					}

					&__newimg {
						display: flex;
						justify-content: space-between;

						image {
							width: 30%;
							height: 50px;
						}
					}

					&__time {
						font-size: 12px;
						margin-top: 10px;
						color: #000000;
					}
				}
			}
		}
	}
</style>
